<template>
	<div class="maps">
		<div class="select-wrap">
			<div class="selected" @click="choseSelected">{{ selectedName }}</div>
			<div class="select-content" v-show="selectState">
				<div class="select" v-for="item in select" :key="item.name" @click="choseSelect(item)">
					{{ item.name }}
				</div>
			</div>
		</div>
		<div class="on-off-line">
			<div>在线设备：{{ dotValid }}</div>
			<div>离线设备：{{ dotInvalid }}</div>
		</div>
		<div class="video-wrap" id="video-wrap" v-if="videoState">
			<div class="close-icon" @click="closeVideo">
				<i class="iconfont icon-guanbi"></i>
			</div>
			<video id="my-video" controls class="playVideo" ref="myVideo" v-if="videoState">
				<source :src="videoSource" type="application/x-mpegURL" />
			</video>
		</div>
		<el-amap vid="amapDemo" :zoom="zoom" :zoomEnable="false" :center="center" class="map-view" :mapStyle="mapStyle">
			<el-amap-marker
				v-for="(marker, index) in markers"
				:key="index"
				:position="marker.position"
				:icon="marker.icon"
				:events="marker.events"
				:visible="marker.visible"
				:draggable="marker.draggable"
				:vid="marker.vid"
			></el-amap-marker>
		</el-amap>
		<div class="dialog" v-show="dialogState">
			无效的地址
		</div>
	</div>
</template>

<script>
import VueAMap from 'vue-amap'
import baseUrl from '../../plugin/url'
VueAMap.initAMapApiLoader({
	key: '27c9dccac70454111afb5953ac815dda',
	plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
	v: '1.4.4'
})
import videojs from 'video.js/dist/video.min'
import 'video.js/dist/video-js.min.css'
export default {
	name: 'MhBdMap',
	data() {
		return {
			mapStyle: 'amap://styles/039a2dd9553dd1ae80f40e7b7fdcfd20',
			dotValid: 0,
			dotInvalid: 0,
			iframeState: false,
			iframeUrl: '',
			videoState: false,
			slotStyle: {
				padding: '2px 8px',
				background: '#eee',
				color: '#333',
				border: '1px solid #aaa'
			},
			zoom: 16,
			center: ['103.785481', '28.415864'],
			markers: [],
			iconFlag: false,
			selectedValue: '0',
			selectedName: '枪机',
			select: [
				{
					name: '枪机',
					value: '0'
				},
				{
					name: '球机',
					value: '1'
				},
				{
					name: '环境监测',
					value: '2'
				},
				{
					name: 'IP广播',
					value: '3'
				},
				{
					name: '一键求助',
					value: '4'
				}
			],
			selectState: false,
			mapDot: [],
			dialogState: false,
			videoSource: ''
		}
	},
	created() {
		this.getInitDevice()
	},
	mounted() {
		// this.videoSource = 'http://171.215.26.28:10800/hls/stream_6/stream_6_live.m3u8'
		// this.getStream()
	},
	beforeDestroy() {
		this.videoPause()
	},
	methods: {
		// 关闭视频流
		closeVideo() {
			this.videoSource = ''
			this.videoState = false
		},
		getStream() {
			// this.videoSource = source
			this.videoState = true
			const self = this
			this.$nextTick(() => {
				setTimeout(function() {
					videojs(
						'my-video',
						{
							bigPlayButton: false,
							textTrackDisplay: false,
							posterImage: false,
							errorDisplay: false,
							controlBar: false
						},
						function() {
							self.$refs['myVideo'].play()
						}
					)
				})
			})
		},
		videoPause() {
			if (this.hls) {
				this.$refs.video.pause()
				this.hls.destroy()
				this.hls = null
			}
		},
		choseSelected() {
			this.selectState = !this.selectState
			this.dotValid = 0
			this.dotInvalid = 0
		},
		choseSelect(val) {
			this.points = []
			this.selectedValue = val.value
			this.selectedName = val.name
			this.selectState = false

			this.getInitDevice()
		},
		// 获取设备列表 经纬度
		getInitDevice() {
			let url = baseUrl + '/web/api/v1/monitor/device/list'
			const params = {
				deviceType: this.selectedValue
			}
			this.$get(url, params).then(res => {
				this.markers = []
				if (res.code === 0) {
					let icons = ''
					res.data.forEach((res, index) => {
						const self = this
						self.ping(res.hardWareUrl)
						self.mapDot.push(res)
						setTimeout(function() {
							if (self.iconFlag) {
								self.dotValid += 1
								icons = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
							} else {
								self.dotInvalid += 1
								icons = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
							}
							self.markers.push({
								position: [res.longitude, res.latitude],
								events: {
									click: value => {
										console.log(self.mapDot)
										self.mapDot.forEach(res => {
											console.log((value.lnglat.lat + '').slice(0, 6))
											console.log((res.latitude + '').slice(0, 6))
											if ((value.lnglat.lng + '').slice(0, 6) === (res.longitude + '').slice(0, 6)) {
												if (res.deviceUrl.match(/(http|https):\/\/([\w.]+\/?)\S*/)) {
													self.videoSource = res.deviceUrl
													self.getStream()
												} else {
													self.dialogState = true
													setTimeout(() => {
														self.dialogState = false
													}, 2000)
												}
											}
										})
									}
								},
								visible: true,
								draggable: false,
								vid: `${index}-vid`,
								icon: icons
							})
						}, 1100 * index)
					})
				}
			})
		},
		ping(ip) {
			var img = new Image()
			var start = new Date().getTime()
			img.src = 'http://' + ip + '?t=' + start
			var flag = false //无法访问
			img.onload = function() {
				flag = true
			}
			img.onerror = function() {
				flag = true
			}
			const self = this
			setTimeout(function() {
				if (!flag) {
					//如果真的无法访问
					self.iconFlag = false
				} else {
					self.iconFlag = true
				}
			}, 1000)
		}
	}
}
</script>

<style scoped lang="less">
.maps {
	width: 100%;
	height: 100%;
	position: relative;
	.map-view {
		width: 100%;
		height: 100%;
	}
	.select-wrap {
		position: absolute;
		right: 20px;
		top: 20px;
		width: 120px;
		height: 35px;
		border-radius: 12px;
		border: 1px solid #1138c8;
		z-index: 100;
		background: #0d1535;
		.selected {
			width: 100%;
			height: 100%;
			color: white;
			font-size: 16px;
			text-align: center;
			line-height: 35px;
			font-weight: bolder;
			&:hover {
				cursor: pointer;
			}
		}
		.select-content {
			width: 120px;
			margin-top: 3px;
			background: #0d1535;
			border-radius: 5px;
			&:hover {
				cursor: pointer;
			}
			.select {
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 16px;
				font-weight: bolder;
				color: white;
				border-bottom: 1px solid white;
				&:nth-last-child(1) {
					border-bottom: none;
				}
				&:hover {
					cursor: pointer;
				}
			}
		}
	}
	.on-off-line {
		display: inline-block;
		position: absolute;
		top: 20px;
		left: 20px;
		color: white;
		z-index: 100;
		font-size: 16px;
	}
	.iframeState {
		position: absolute;
		top: 30px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 20;
		cursor: pointer;
	}
	.video-wrap {
		width: 300px;
		height: 170px;
		position: absolute;
		top: 60px;
		left: 50%;
		transform: translateX(-150px);
		z-index: 500;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover .close-icon {
			display: block;
		}
		.close-icon {
			position: absolute;
			top: 0px;
			right: 0px;
			z-index: 100;
			display: none;
			cursor: pointer;
			.iconfont {
				position: absolute;
				right: 0;
				sto: 0;
				font-size: 50px;
				color: #3e3232;
			}
		}
		.full-width {
			width: 100%;
			height: 100%;
		}
		.iconfont {
			font-size: 20px;
			position: absolute;
			top: 10px;
			right: 10px;
			font-weight: bolder;
			color: #a7274f;
			cursor: pointer;
		}
		.playVideo {
			width: 100%;
			height: 100%;
			video {
				width: 100%;
				height: 100%;
			}
		}
	}
	.dialog {
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 330px;
		height: 48px;
		border-radius: 6px;
		box-shadow: 0 0 3px black;
		background: rgba(0, 0, 0, 0.5);
		text-align: center;
		line-height: 48px;
		color: white;
		font-size: 21px;
	}
}
</style>
